<template>
  <div>
    <px-tabs v-model="activeWater" class="equipment-tabs" style="padding-left: 24px; background: white" @tab-click="getcharts">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>
    <px-row v-if="activeWater != 'regeneration'" style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-form-item label="统计维度">
              <px-select v-model="queryParams.timeUnit" placeholder="请选择" style="width: 210px" filterable @change="timechange">
                <px-option v-for="dict in dimensionList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>

            <px-form-item v-if="queryParams.timeUnit == 'YEAR'" label="年份">
              <!-- <px-date-picker v-model="queryParams.Time" type="year" placeholder="请选择" /> -->
              <yearPicker :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
            </px-form-item>
            <px-form-item v-if="queryParams.timeUnit == 'MONTH'" label="时间">
              <px-date-picker
                v-model="dateRange"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                placeholder="请选择"
                format="YYYY-MM"
                value-format="YYYY-MM"
                @change="settime"
              />
            </px-form-item>
            <px-form-item v-if="queryParams.timeUnit == 'DAY'" style="width: 440px" label="时间">
              <px-date-picker
                v-model="dateRange2"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="settime2"
              />
            </px-form-item>
            <px-form-item label="预测">
              <px-select v-model="forecast" placeholder="请选择" style="width: 210px" filterable @change="timechange">
                <px-option v-for="dict in forecastList" :key="dict.itemValue" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </px-col>
    </px-row>
    <px-row v-if="activeWater != 'regeneration'" style="margin-top: 16px" :gutter="16">
      <px-col :span="14" class="water_col" style="height: 320px; margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="用水趋势图" />
          <charts4
            ref="piecharts"
            :timeunit="queryParams.timeUnit"
            :activewater="activeWater"
            :starttime="queryParams.startTime"
            :endtime="queryParams.endTime"
            :chartvalue="TrendChart"
            :queryParams="queryParams"
            :forecast="forecast"
            style="width: 100%"
            :width="'100%'"
            :height="'290px'"
          />
        </div>
      </px-col>
      <px-col v-if="activeWater != 'pure'" :span="10" class="water_col" style="height: 320px; margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="总量占比图" />
          <charts2 :chartValue="PieChart" style="width: 100%" :width="'100%'" :height="'290px'" @getPieData="setgetPieData" />
        </div>
      </px-col>
      <px-col v-else :span="10" class="water_col" style="height: 320px; margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle title="负荷率" />
          <charts3 :chartValue="LoadRateDate" style="width: 100%" :width="'100%'" :height="'290px'" />
        </div>
      </px-col>
      <px-col :span="24" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow" style="position: relative">
          <modelTitle title="数据列表" />
          <px-button v-has="'WATER_REPORT_EXPORT'" type="primary" style="position: absolute; top: 16px; right: 32px" plain @click="handleExport"
            >导出报表</px-button
          >
          <px-table
            v-if="activeWater == 'tap'"
            :data="tableData.dataList"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%; margin-top: 16px"
            class="taptable"
          >
            <px-table-column type="index" label="序号" fixed width="55" align="center" />
            <px-table-column fixed width="100" :label="queryParams.timeUnit == 'DAY' ? '日期' : queryParams.timeUnit == 'MONTH' ? '月份' : '年份'">
              <template #default="scope">
                <span>{{ scope.row.reportTime }}</span>
              </template>
            </px-table-column>
            <px-table-column v-for="(item, index) in tableData?.headList" :key="index" align="center" :label="`${item.name}`">
              <template #header>
                <p>{{ item.name }}</p>
                <p style="font-size: 12px">{{ item.subName ? `${item.subName}` : "" }}</p>
              </template>
              <px-table-column align="center" :label="item.unit">
                <px-table-column align="center" :label="item.description">
                  <template #default="scope">
                    <span>{{ scope.row[item.field] }}</span>
                  </template>
                </px-table-column>
              </px-table-column>
            </px-table-column>
          </px-table>
          <px-table
            v-if="activeWater == 'pure'"
            :data="tableData.dataList"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%; margin-top: 16px"
            class="puretable"
          >
            <px-table-column type="index" label="序号" fixed width="55" align="center" />
            <px-table-column fixed width="100" :label="queryParams.timeUnit == 'DAY' ? '日期' : queryParams.timeUnit == 'MONTH' ? '月份' : '年份'">
              <template #default="scope">
                <span>{{ scope.row.reportTime }}</span>
              </template>
            </px-table-column>

            <px-table-column v-for="(item, index) in tableData?.groupList" :key="index" align="center" :label="`${item.group}`">
              <template #header>
                <p v-if="item.headList.length < 2" />
                <p v-else>{{ item.group }}</p>
              </template>
              <px-table-column v-for="(items, index) in item.headList" :key="index" align="center" :label="`${items.name} ${items.subName}`">
                <template #header>
                  <p>{{ items.name }}</p>
                  <p style="font-size: 9px">{{ items.subName }}</p>
                </template>
                <px-table-column align="center" :label="items.unit">
                  <px-table-column align="center" :label="items.description">
                    <template #default="scope">
                      <span>{{ scope.row[items.field] }}</span>
                    </template>
                  </px-table-column>
                </px-table-column>
              </px-table-column>
            </px-table-column>
          </px-table>
          <px-table
            v-if="activeWater == 'waste'"
            :data="tableData.dataList"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%; margin-top: 16px"
            class="wastetable"
          >
            <px-table-column type="index" label="序号" fixed width="55" align="center" />
            <px-table-column fixed width="100" :label="queryParams.timeUnit == 'DAY' ? '日期' : queryParams.timeUnit == 'MONTH' ? '月份' : '年份'">
              <template #default="scope">
                <span>{{ scope.row.reportTime }}</span>
              </template>
            </px-table-column>
            <px-table-column v-for="(item, index) in tableData?.groupList" :key="index" align="center" :label="`${item.group}`">
              <template #header>
                <p v-if="item.headList.length < 2" />
                <p v-else>{{ item.group }}</p>
              </template>
              <px-table-column v-for="(items, index) in item.headList" :key="index" align="center" :label="`${items.name} ${items.subName}`">
                <template #header>
                  <p>{{ items.name }}</p>
                  <p style="font-size: 9px">{{ items.subName }}</p>
                </template>
                <px-table-column align="center" :label="items.unit">
                  <px-table-column align="center" :label="items.description">
                    <template #default="scope">
                      <span>{{ scope.row[items.field] }}</span>
                    </template>
                  </px-table-column>
                </px-table-column>
              </px-table-column>
            </px-table-column>
          </px-table>
        </div>
      </px-col>
    </px-row>
    <px-row v-else style="height: 64px">
      <px-col :span="24" class="water_col"> 待再生水启用后进行开发 </px-col>
    </px-row>
  </div>
</template>
<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import charts2 from "./charts2.vue";
import charts3 from "./charts3.vue";
import charts4 from "./charts4.vue";
import type { TableColumnCtx } from "px-ui";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import chartloadSummary from "./chartloadSummary.vue";
import { spcqueryList, spcquerySpcAnalysis } from "@/api/spc";
import { PxMessage, PxMessageBox } from "px-ui";
import {
  consumptionqueryConsumptionList,
  consumptionqueryDetail,
  consumptionqueryMaterialList,
  consumptionquerySystemList,
  balanceReportqueryListTW,
  balanceReportqueryPieChartTW,
  balanceReportqueryTrendChartTW,
  balanceReportqueryListWW,
  balanceReportqueryPieChartWW,
  balanceReportqueryTrendChartWW,
  balanceReportqueryListUPW,
  balanceReportqueryPieChartUPW,
  balanceReportqueryTrendChartUPW,
  balanceReportqueryLoadRateUPW
} from "@/api/waterconsumption";
const forecast = ref(false);
const piecharts = ref(null);
const dateValue = ref<any>({ startYear: new Date().getFullYear() - 6, endYear: new Date().getFullYear() });
const updateStatisticYear: any = (startYear: number, endYear: number) => {
  console.log("选中年份", startYear, endYear);
  // queryParams.value.dateRange = [startYear.toString(), endYear.toString()];
  queryParams.value.startTime = `${startYear}-01-01 00:00:00`;
  queryParams.value.endTime = `${endYear}-12-31 23:59:59`;
};
const settime = val => {
  console.log(val);
  queryParams.value.startTime = `${val[0]}-01 00:00:00`;
  queryParams.value.endTime = `${val[1]}-31 23:59:59`;
};
const setgetPieData = val => {
  console.log(val);
  piecharts.value.pieClick(val.field);
};
const timechange = val => {
  if (val == "MONTH") {
    queryParams.value.startTime = `${dateRange.value[0]}-01-01 00:00:00`;
    queryParams.value.endTime = `${dateRange.value[1]}-12-31 23:59:59`;
  }
  if (val == "YEAR") {
    queryParams.value.startTime = `${dateValue.value.startYear}-01-01 00:00:00`;
    queryParams.value.endTime = `${dateValue.value.endYear}-12-31 23:59:59`;
  }
  if (val == "DAY") {
    queryParams.value.startTime = `${dateRange2.value[0]}-01 00:00:00`;
    queryParams.value.endTime = `${dateRange2.value[1]}-31 23:59:59`;
  }
};
const settime2 = val => {
  console.log(val);
  queryParams.value.startTime = val[0];
  queryParams.value.endTime = val[1];
};

const data = reactive({
  forecastList: [
    { itemName: "开", itemValue: true },
    { itemName: "关", itemValue: false }
  ],
  TrendChart: {},
  PieChart: [],
  spcName: "",
  barchartvalue: {},
  consumptionMaterialList: [],
  consumptionSystemList: [],
  Materialvalue: "",
  Systemvalue: "",
  fsconsumptionMaterialList: [],
  fsconsumptionSystemList: [],
  fsMaterialvalue: "",
  fsSystemvalue: "",
  chartsTitle: "化学品消耗趋势图",
  queryParams: {
    timeUnit: "DAY",
    startTime: "",
    endTime: "",
    consumptionType: ""
  },
  syetemList: [],
  samplingLocationList: [],
  dateRange: [],
  dateRange2: [],
  testItemList: [],
  chartsList: [],
  tableData: [],
  dimensionList: [
    {
      itemName: "日",
      itemValue: "DAY"
    },
    {
      itemName: "月",
      itemValue: "MONTH"
    },
    {
      itemName: "年",
      itemValue: "YEAR"
    }
  ],
  spcList: [],
  spcChartsList: []
});
const {
  forecastList,
  TrendChart,
  PieChart,
  spcChartsList,
  spcName,
  spcList,
  barchartvalue,
  Materialvalue,
  Systemvalue,
  consumptionMaterialList,
  consumptionSystemList,
  fsMaterialvalue,
  fsSystemvalue,
  fsconsumptionMaterialList,
  fsconsumptionSystemList,
  queryParams,
  chartsTitle,
  tableData,
  dateRange,
  dimensionList,
  dateRange2
} = toRefs(data);
const activeWater = ref("tap");
const tabPaneList = [
  {
    label: "自来水用量",
    name: "tap"
  },
  {
    label: "纯水用量",
    name: "pure"
  },
  {
    label: "废水处理量",
    name: "waste"
  },
  {
    label: "再生水用量",
    name: "regeneration"
  }
];

const getsixmonth = () => {
  const date = new Date();
  let SixMon = new Date(date);
  SixMon.setMonth(SixMon.getMonth() - 6);
  console.log(SixMon.toISOString().split("T")[0].slice(0, -3));
  return SixMon.toISOString().split("T")[0].slice(0, -3);
};
const getdate = () => {
  const date = new Date();
  return date.toISOString().split("T")[0].slice(0, -3);
};
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}

onMounted(() => {
  dateRange.value = [`${getsixmonth()}`, `${getdate()}`];
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dateRange2.value = [formatDate(start), formatDate(end)];
  getList();
});
const changeplanCode = val => {
  setcheckList();
};
const setcheckList = () => {
  let timePeriodvalue = "";
  if (queryParams.value.timeUnit == "DAY") {
    timePeriodvalue = "day";
  }
  if (queryParams.value.timeUnit == "MONTH") {
    timePeriodvalue = "months";
  } else {
    PxMessage.warning("指标不支持年度搜索");
    return false;
  }
  spcquerySpcAnalysis({
    jobIdList: [spcName.value],
    timePeriod: timePeriodvalue,
    startTime: queryParams.value.timeUnit == "DAY" ? `${dateRange.value.value2[0]}-01 00:00:00` : `${dateRange.value[0]}-01 00:00:00`,
    endTime: queryParams.value.timeUnit == "DAY" ? `${dateRange.value[1]}-31 00:00:00` : `${dateRange.value[1]}-31 00:00:00`
  }).then((response: any) => {
    console.log(response);
    spcChartsList.value = response;
  });
};
const getcharts = val => {
  console.log(val);
  piecharts.value.clearvalue();
  setTimeout(() => {
    getList();
  }, 100);
};
const getchartsValue = () => {
  if (activeWater.value == "pure") {
    consumptionqueryDetail({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      consumptionType: queryParams.value.consumptionType,
      systemCode: Systemvalue.value,
      materialCode: Materialvalue.value
    }).then(res => {
      console.log(res);
      barchartvalue.value = res;
    });
  } else {
    consumptionqueryDetail({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      consumptionType: queryParams.value.consumptionType,
      systemCode: fsSystemvalue.value,
      materialCode: fsMaterialvalue.value
    }).then(res => {
      console.log(res);
      barchartvalue.value = res;
    });
  }
};
const loading = ref(false);
const handleQuery = () => {
  getList();
};
const resetQuery = () => {
  queryParams.value = {
    timeUnit: "DAY",
    startTime: "",
    endTime: "",
    consumptionType: ""
  };
  dateRange.value = [`${getsixmonth()}`, `${getdate()}`];
  getList();
};
interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "";
      return;
    } else if (index === 1) {
      sums[index] = "总计";
      return;
    } else {
      console.log(column);
      console.log(index);
      console.log(data);
      sums[index] = `${data
        .map(item => item[tableData.value.headList[index - 2].field])
        .reduce((prev, curr) => {
          const value = Number(curr);
          if (!Number.isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toFixed(2)}`;
    }
  });
  return sums;
};
const LoadRateDate = ref([]);
function getList() {
  loading.value = true;
  if (queryParams.value.timeUnit == "MONTH") {
    if (dateRange.value != null) {
      queryParams.value.startTime = `${dateRange.value[0]}-01 00:00:00`;
      queryParams.value.endTime = `${dateRange.value[1]}-31 00:00:00`;
    } else {
      queryParams.value.startTime = "";
      queryParams.value.endTime = "";
    }
  }
  if (queryParams.value.timeUnit == "DAY") {
    if (dateRange.value != null) {
      queryParams.value.startTime = `${dateRange2.value[0]}`;
      queryParams.value.endTime = `${dateRange2.value[1]}`;
    } else {
      queryParams.value.startTime = "";
      queryParams.value.endTime = "";
    }
  }
  if (activeWater.value == "tap") {
    balanceReportqueryPieChartTW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      PieChart.value = res;
    });
    balanceReportqueryTrendChartTW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      TrendChart.value = res;
    });
    balanceReportqueryListTW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      tableData.value = res;
    });
  } else if (activeWater.value == "pure") {
    balanceReportqueryPieChartUPW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      PieChart.value = res;
    });
    balanceReportqueryTrendChartUPW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      TrendChart.value = res;
    });
    balanceReportqueryListUPW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      tableData.value = res;
    });
    balanceReportqueryLoadRateUPW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      console.log(res);
      LoadRateDate.value = res;
    });
  } else {
    balanceReportqueryPieChartWW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      PieChart.value = res;
    });
    balanceReportqueryTrendChartWW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      TrendChart.value = res;
    });
    balanceReportqueryListWW({
      timeUnit: queryParams.value.timeUnit,
      startTime: queryParams.value.startTime,
      endTime: queryParams.value.endTime,
      forecast: forecast.value
    }).then(res => {
      tableData.value = res;
    });
  }
}
import { getToken } from "@/utils/auth";
const { VITE_FANRUAN_BASE_URL, VITE_SERVE_API_STATIC_URL } = import.meta.env;
/** 导出按钮操作 */
function handleExport() {
  if (dateRange.value != null && dateRange.value.length > 0) {
    let Token = getToken().accessToken || "";
    if (queryParams.value.timeUnit == "MONTH") {
      if (dateRange.value != null) {
        queryParams.value.startTime = `${dateRange.value[0]}-01 00:00:00`;
        queryParams.value.endTime = `${dateRange.value[1]}-31 00:00:00`;
      } else {
        queryParams.value.startTime = "";
        queryParams.value.endTime = "";
      }
    }
    if (queryParams.value.timeUnit == "DAY") {
      if (dateRange.value != null) {
        queryParams.value.startTime = `${dateRange2.value[0]}`;
        queryParams.value.endTime = `${dateRange2.value[1]}`;
      } else {
        queryParams.value.startTime = "";
        queryParams.value.endTime = "";
      }
    }
    if (activeWater.value == "tap") {
      let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=water%252F%25E6%25B0%25B4%25E5%25B9%25B3%25E8%25A1%25A1-%25E6%25B0%25B4%25E9%2587%258F%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&from=${queryParams.value.startTime}&to=${queryParams.value.endTime}&forecast=${forecast.value}&timeUnit=${queryParams.value.timeUnit}&format=excel&extype=simple&type=TW&facCode=${localStorage.getItem("facCode") || ""}&apiHost=${VITE_SERVE_API_STATIC_URL}`;
      window.location.href = url;
    }
    if (activeWater.value == "pure") {
      let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=water%252F%25E6%25B0%25B4%25E5%25B9%25B3%25E8%25A1%25A1-%25E6%25B0%25B4%25E9%2587%258F%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&from=${queryParams.value.startTime}&to=${queryParams.value.endTime}&forecast=${forecast.value}&timeUnit=${queryParams.value.timeUnit}&format=excel&extype=simple&type=UPW&facCode=${localStorage.getItem("facCode") || ""}&apiHost=${VITE_SERVE_API_STATIC_URL}`;
      window.location.href = url;
    }
    if (activeWater.value == "waste") {
      let url = `${VITE_FANRUAN_BASE_URL}/webroot/decision/view/report?viewlet=water%252F%25E6%25B0%25B4%25E5%25B9%25B3%25E8%25A1%25A1-%25E6%25B0%25B4%25E9%2587%258F%25E6%258A%25A5%25E8%25A1%25A8.cpt&token=${Token}&from=${queryParams.value.startTime}&to=${queryParams.value.endTime}&forecast=${forecast.value}&timeUnit=${queryParams.value.timeUnit}&format=excel&extype=simple&type=WW&facCode=${localStorage.getItem("facCode") || ""}&apiHost=${VITE_SERVE_API_STATIC_URL}`;
      window.location.href = url;
    }
  } else {
    PxMessage({
      message: "请选择时间后再导出",
      type: "error"
    });
  }
}
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 45px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 17px;
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

:deep(.px-table) {
  border: 1px #ccc !important;

  .px-table__cell {
    padding: 6px 0;
    border-color: #ccc !important;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: #e7eefb !important;
    }
  }
}

:deep(.taptable) {
  .px-table__body-wrapper .px-table__body tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }

  .px-table__footer-wrapper .px-table__footer tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }
}

:deep(.puretable) {
  .px-table__header-wrapper .px-table__header tr:nth-child(1) {
    th:nth-child(3) {
      border-bottom: none;
    }

    th:nth-child(4) {
      border-bottom: none;
    }

    th:nth-child(5) {
      border-bottom: none;
    }

    th:nth-child(6) {
      border-bottom: none;
    }

    th:nth-child(7) {
      border-bottom: none;
    }
  }

  .px-table__body-wrapper .px-table__body tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(7) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(11) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(12) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(13) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(14) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(17) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }

  .px-table__footer-wrapper .px-table__footer tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(7) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(11) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(12) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(13) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(14) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }

    td:nth-child(17) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }
}

:deep(.wastetable) {
  .px-table__header-wrapper .px-table__header tr:nth-child(1) {
    th:nth-child(3) {
      border-bottom: none;
    }

    th:nth-child(8) {
      border-bottom: none;
    }

    th:nth-child(9) {
      border-bottom: none;
    }
  }

  .px-table__body-wrapper .px-table__body tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }

  .px-table__footer-wrapper .px-table__footer tr {
    td:nth-child(3) {
      // border-bottom: none;
      background-color: #fff2db !important;
    }
  }
}
</style>
